---
title: Tailwind CSS Button - Components Library @David UI
description: Tailwind CSS button components at David UI offer customizable styles and responsive designs for all types of CTAs. Perfect for any application.
github: button
prev: docs/html/inputs
next: docs/html/button-group
---

# Tailwind CSS Button

Create engaging CTAs with the button component in David UI. Styled with Tailwind CSS, it offers various states, sizes, and designs for all types of actions. They are fully customizable and responsive.

See our free component examples below that will help you seamlessly integrate buttons into your Tailwind CSS web applications.

---

## Basic Button

Discover a versatile button with a dark background, white text, and rounded corners. It changes color on hover, showcasing an interactive design.

<PreviewWithCode relativePath="button/button-demo.tsx" language="html" />

---

## Button Variants

Explore buttons in various styles, including ghost, outline, solid, and gradient, to suit different design needs.

<PreviewWithCode relativePath="button/button-variants.tsx" language="html" />

---

## Button Sizes

Design buttons in multiple sizes, such as small, medium, and large, using this example to fit your interface requirements.

<PreviewWithCode relativePath="button/button-sizes.tsx" language="html" />

---

## Button Colors

Create buttons in a range of colors, including primary, secondary, info, success, warning, and error, each representing a specific action or state.

<PreviewWithCode relativePath="button/button-colors.tsx" language="html" />

---

## Button With Icon

Improve your buttons with icons for added context. This example uses Iconoir icons, but any icon set can be applied.

<PreviewWithCode relativePath="button/button-with-icon.tsx" language="html" />

---

## Block Level Button

Make buttons span the entire width of a container by rendering them as block-level elements using the `w-full` class. This example demonstrates block-level buttons in styles like ghost, outline, solid, and gradient.

<PreviewWithCode relativePath="button/block-level-button.tsx" language="html" />

---

## Pill Button

Design pill-shaped buttons with styles such as ghost, outline, solid, and gradient. Use the rounded-full class to achieve the pill shape.

<PreviewWithCode relativePath="button/pill-button.tsx" language="html" />

---

## Button As Link

Transform buttons into clickable links by using the `a` tag instead of the `button` tag. This example illustrates buttons in styles like ghost, outline, solid, and gradient functioning as links.

<PreviewWithCode relativePath="button/button-as-link.tsx" language="html" />

---

## Button with Loading State

Create buttons with a loading state using the animate-spin class. This example includes a loading spinner implemented with an SVG element inside the button.

<PreviewWithCode relativePath="button/button-loading.tsx" language="html" />

---

## Custom Auth Button

Leverage Tailwind CSS classes to design buttons for authentication purposes, including examples customized for social media and Web 3.0 integrations.

<PreviewWithCode relativePath="button/custom-auth-button.tsx" language="html" />

---

## Required Script

To enable the ripple effect for buttons, include the provided script file at the bottom of your HTML document. If you prefer buttons without the ripple effect, this step is optional.


<CodePreviewTailwindClasses />




---

